<template>
    <!-- components/indexNavigate/index.wxml -->
    <view class="navbar custom-class" :style="'height:' + navHeight + 'px; background-color: ' + bgColor + ';'">
        <view class="content" :style="'margin-top:' + navTop + 'px;height: ' + navContentHeight + 'px;width: ' + navSafeWidth + 'px;padding: 0 24rpx;box-sizing: border-box;'">
            <view class="flex_row_c" @tap="onSelectCityFun">
                <image style="width: 32rpx; height: 36rpx" src="https://cq-prd.oss-cn-hangzhou.aliyuncs.com/static/res/icon/shouyedingwei.png"></image>
                <text class="city_text">{{ district }}</text>
            </view>
            <view class="search-content flex_row_c" :style="'background-color: ' + searchContentBgColor + ';'" @tap="onSearchFun">
                <van-icon class-prefix="iconfont" name="sousuoyesousuo" :color="iconColor" size="12px"></van-icon>
                <text class="search-hint">请输入搜索内容</text>
            </view>
        </view>
    </view>
</template>

<script>
// components/indexNavigate/index.js
export default {
    data() {
        return {
            navHeight: '',
            navTop: '',
            navContentHeight: '',
            navSafeWidth: '',
            iconColor: ''
        };
    },
    options: {
        addGlobalClass: true
    },
    externalClasses: ['custom-class'],
    mixins: [require('@/behaviors/navi-behavior')],
    props: {
        district: {
            type: String,
            default: '全国'
        },
        bgColor: {
            type: String,
            default: 'white'
        },
        searchContentBgColor: {
            type: String,
            default: 'white'
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    methods: {
        attached: function () {},

        onSelectCityFun() {
            this.$emit('onSelectCity', {
                detail: {}
            });
        },

        onSearchFun() {
            this.$emit('onSearch', {
                detail: {}
            });
        }
    },
    created: function () {}
};
</script>
<style>
@import './index.css';
</style>
